<template>
 <!-- 轮播图 -->
 <el-carousel
    height="500px"
    width="100%"
    direction="vertical"
    motion-blur
    :autoplay="true"
  >
    <el-carousel-item v-for="(path,index) in lbtPath" :key="index">
      <img :src="path" alt="这是图片"/>
    </el-carousel-item>
  </el-carousel>
  <!-- 搜索框 -->
  <div class="searchDiv">
    <el-input
        class="inputTag"
        v-model="searchInput"
        style="width: 240px"
        size="large"
        placeholder="请输入景区的名称"
        :suffix-icon="Search"
      />
    <el-button class="searchBtn" type="primary" @click="searchHandle">搜一搜</el-button>
  </div>
  <!-- 景区分类 -->
  <div class="scenicTypeDiv">
    景区分类：
    <el-segmented style="height: 35px;width: 1200px;" v-model="defaultValue" :options="options" block />
  </div>
  <!-- 景区数据显示 -->
  <div class="showDiv" v-loading="loading">
    <div class="scenic-container">
      <el-card 
        v-if="scenicData.length > 0"
        v-for="item in scenicData" 
        :key="item.id"
        class="scenic-card"
        shadow="hover"
      >
        <div class="scenic-content">
          <div class="scenic-image">
            <el-image
              :src="item.imgUrl"
              fit="cover"
              class="scenic-cover-image"
            />
            <div class="scenic-image-overlay">
              <el-button type="primary" size="small" round>
                <RouterLink class="view-details" :to="`/travel-info/${item.id}`">查看详情</RouterLink>
              </el-button>
            </div>
          </div>
          <div class="scenic-info">
            <h2 class="scenic-name">
              <RouterLink :to="`/travel-info/${item.id}`">{{item.name}}</RouterLink>
            </h2>
            
            <div class="scenic-meta">
              <span class="meta-item">
                <el-tag size="small" effect="dark">{{item.type}}</el-tag>
              </span>
              <span class="meta-item rating">
                <el-icon style="color: #FFB800;" v-for="i in item.score" :key="i"><Star /></el-icon>
              </span>
              <span class="meta-item price">
                <el-tag type="success" size="small" effect="dark">
                  {{item.ticketPrice === 0 ? '免费' : `¥${item.ticketPrice}`}}
                </el-tag>
              </span>
            </div>

            <div class="scenic-details">
              <p class="address">
                <el-icon><LocationFilled /></el-icon>
                <el-link :href="`https://cn.bing.com/maps?q=${item.addressDetail}`" type="primary">
                  {{ item.addressDetail }}
                </el-link>
              </p>
              <p class="phone">
                <el-icon><Phone /></el-icon>
                <span>13125063329</span>
              </p>
            </div>

            <div class="scenic-stats">
              <el-statistic title="浏览量" :value="item.view" :value-style="{ color: '#409EFF' }">
                <template #suffix>
                  <el-icon><View /></el-icon>
                </template>
              </el-statistic>
            </div>
          </div>
        </div>
      </el-card>

      <el-empty 
        v-if="scenicData.length === 0" 
        description="未找到任何数据！" 
        :image-size="200" 
      />
    </div>
  </div>
  <!-- 分页标签 -->
  <div v-if="scenicData.length > 0" class="pageTag">
    <el-pagination
      size="default"
      background
      default-page-size="5"
      :current-page="currentPage"
      layout="prev, pager, next"
      :total="total"
      :page-count="pageCount"
      class="mt-4"
      @current-change="handlePageChange"
    />
  </div>
  <!-- 底部 -->
  <div class="footDiv">
    <el-backtop :bottom="100">
      <div
        style="
          height: 100%;
          width: 100%;
          background-color: var(--el-bg-color-overlay);
          box-shadow: var(--el-box-shadow-lighter);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        "
      >
        UP
      </div>
    </el-backtop>
    <img src="../assets/kl_logo.png" style="height: 50px;width: 50px;" />
    <span>
      作者：王子康 | 
      QQ邮箱：<el-link href="https://mail.qq.com/">1750464197@qq.com</el-link> |
      本系统属于本科毕业设计源码获取请联系邮箱
    </span>

  </div>
</template>

<script setup>
import { ref,onMounted,watch } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { RouterLink } from 'vue-router'
const loading = ref(false)
// 导入轮播图
const lbtPath = ref([require('../assets/lbt1.jpeg'),require('../assets/lbt2.jpeg'),require('../assets/lbt3.jpg'),require('../assets/lbt4.jpg')])
//搜索
const searchInput = ref('')
//默认选中的类型
const defaultValue = ref('')
//景区类型
const options = []
//当前页码
const currentPage = ref(1)
//总条数
const total = ref(0)
//总页数
const pageCount = ref(0)
onMounted(() => {
  getAllType()
})

// 翻页时触发
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  scenicQueryPage()
}

// 监听 defaultValue 的变化，一旦有值就调用查询
watch(defaultValue, (newValue) => {
  if (newValue) {
    scenicQueryPage()
  }
})

//景区数据
const scenicData = ref([])

const scenicQueryPage = function(){
  axios.get('/api/scenic/all/page',{
    params:{
      pageNum: currentPage.value,
      pageSize: 5,
      type: defaultValue.value
    }
  })
  .then(res => {
    if(res.data.code === 200){
      scenicData.value = res.data.data.data
      total.value = res.data.data.total
      pageCount.value = res.data.data.pageCount
    }else{
      ElMessage({
        message: res.data.message,
        type: 'error',
      })
    }
  }).catch(err => {
    ElMessage({
      message: "获取数据失败!",
      type: 'error',
    })
  })
}

const getAllType = function(){
  // console.log("获取景区类型")
  axios.get('/api/type/all').then(res => {
    if(res.data.code === 200){
      const types = res.data.data
      types.forEach(type => {
        options.push(type.typeName)
      })
      //设置默认选中
      defaultValue.value = options[0]
    }else{
      ElMessage({
        message: res.data.message,
        type: 'error',
      })
    }
  }).catch(err => {
    ElMessage({
      message: "数据获取失败!",
      type: 'error',
    })
  })
}

const searchHandle = function(){
  if(searchInput.value === '' || searchInput === null ){
    ElMessage({
      showClose: true,
      message: '未输入任何内容！',
      type: 'warning'
    })
  }else{
    axios.get('/api/scenic/like/name',{
      params:{
        name: searchInput.value,
        pageNum: currentPage.value,
        pageSize: 5
      }
    })
    .then(res => {
      if(res.data.code === 200){
      scenicData.value = res.data.data.data
      total.value = res.data.data.total
      pageCount.value = res.data.data.pageCount
    }else{
      ElMessage({
        message: res.data.message,
        type: 'error',
      })
    }
    }).catch(err => {
      ElMessage({
        message: "数据获取失败!",
        type: 'error',
      })
    })
  }
}
</script>

<style scoped>
.searchDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}
.searchBtn{
  margin-left: 10px;
  height: 40px;
}
.scenicTypeDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}
.showDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  flex-wrap: wrap;
  padding: 0 20px;
}
.pageTag{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}
.footDiv{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid dodgerblue;
}

.scenic-container {
  width: 90%;
  max-width: 1200px;
}

.scenic-card {
  margin-bottom: 25px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.scenic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.scenic-content {
  display: flex;
  gap: 20px;
}

.scenic-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 300px;
}

.scenic-cover-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.scenic-card:hover .scenic-cover-image {
  transform: scale(1.05);
}

.scenic-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scenic-card:hover .scenic-image-overlay {
  opacity: 1;
}

.view-details {
  color: white;
  text-decoration: none;
}

.scenic-info {
  flex: 1;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scenic-name {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 15px;
}

.scenic-name a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.scenic-name a:hover {
  color: #409EFF;
}

.scenic-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.scenic-details {
  margin: 10px 0;
}

.address, .phone {
  display: flex;
  align-items: center;
  margin: 8px 0;
  gap: 8px;
}

.scenic-stats {
  margin-top: 10px;
}
</style>
